<template>
  <zm-panel
    title="详情"
    :visible.sync="value"
    @change="closeAfter"
    size="small"
    class="customerFollow"
  >
    <div slot="title" class="fs16">
      <span>{{ obj.customerName }}{{ obj.followTime }}跟进记录</span>
      <span v-if="form.isConsulted === '0'">
        <span class="text-error">• 未查阅</span>
      </span>
      <span v-else class="text-success">• 已查阅</span>
    </div>
    <app-block v-if="+obj.isConsultAuth === 1 && tabType !== '1'">
      <!-- 是否有查阅权限 0无 1有 -->
      <el-button size="small" @click="oncomment">评论</el-button>
      <el-button
        type="primary"
        size="small"
        @click="onConsult"
        v-if="form.isConsulted === '0'"
      >
        确认查阅
      </el-button>
    </app-block>
    <app-block v-if="tabType === '1' && +obj.isConsulted === 0">
      <!-- tabType === '1' 我提交的 -->
      <el-button size="small" @click="onEdit">编辑</el-button>
      <el-button type="primary" size="small" @click="onDel">
        删除
      </el-button>
    </app-block>
    <app-block>
      <h3 class="">基础信息</h3>
      <detail-table :list="detailParams" :info="form"></detail-table>
    </app-block>
    <app-block>
      <h3 class="mtb20 fs18">
        评论内容(共<span class="text-primary">{{ count || 0 }}</span>条)
      </h3>
      <!-- <zm-table-data
        :data="tableParams.data"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :show-header="false"
        :border="false"
        :stripe="false"
      >
        <zm-table-column label="" align="left">
          <template slot-scope="scope">
          </template>
        </zm-table-column>
      </zm-table-data> -->
      <el-card
        :body-style="{ padding: '0px' }"
        v-for="(item, index) in tableParams.data"
        :key="index"
        class="mb10 pd10"
      >
        <div class="mb10">
          <time class="time fc9">{{ item.dateTag }}</time>
        </div>
        <div>
          <div class="fc6">
            <img :src="item.headImg||defaultAvatar" alt="" class="headImg" />
            <span>{{ item.realName }}</span>
            <span class="pl20">{{ item.roleName }}</span>
            <span class="fr">{{ item.createTime }}</span>
          </div>
          <div class="mt10">评论：{{ item.content }}</div>
        </div>
      </el-card>
      <zm-page-bar
      v-if="tableParams.data.length"
      :total="Number(tableParams.total)"
      :current-page="tableParams.page"
      :page-size="tableParams.pageSize"
      :page-sizes="tableParams.pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleIndexChange"
      class="mt20 tr"
      background
    />
    </app-block>
    <div slot="footer" class="tr"></div>
    <detail-comment
      v-if="commentParams.visible"
      v-model="commentParams.visible"
      :id="commentParams.id"
      @after="loadList"
    ></detail-comment>
    <new-panel
      :obj="newParams.obj"
      v-model="newParams.visible"
      v-if="newParams.visible"
      @after="afterEdit"
    ></new-panel>
  </zm-panel>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import tableMixin from '@/mixins/zmTableMixin'
import { detail, getCommentPageList, consult } from '@/api/src/follow'
import { detailParams, commentColumns } from '../const'
import DetailTable from '@/components/zmDetailTable'
import DetailComment from './comment'
import NewPanel from '../components/New'
import { mapGetters } from 'vuex'
import defaultAvatar from '@/assets/default-logo.jpg'
import api from '@/api'

export default {
  name: 'DetailFollow',
  components: { DetailTable, DetailComment, NewPanel },
  mixins: [panelMixin, tableMixin],
  props: {
    tabType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      defaultAvatar,
      detailParams,
      form: {
        isConsulted: '0',
        customerId: '',
        followType: '',
        followPurpose: '',
        followTime: '',
        content: '',
        consultAccountId: ''
      },
      count: 0,
      commentParams: {
        bisible: false,
        id: ''
      },
      newParams: {
        visible: false,
        obj: {}
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    pTitle () {
      return this.obj.customerName + this.obj.followTime + '跟进记录'
    },
    columns () {
      return commentColumns(this)
    }
  },
  async created () {
    this.getInfo()
    await this.onSearch()
  },
  methods: {
    async getInfo () {
      this.form = await detail({ id: this.obj.id })
    },
    async loadList () {
      const res = await getCommentPageList(
        this.assignQuery({ id: this.obj.id })
      )
      this.count = res.count
      this.initialTableData(res.list, res.count)
    },
    oncomment () {
      this.commentParams = {
        visible: true,
        id: this.obj.id
      }
    },
    async onConsult () {
      await consult({ id: this.obj.id })
      this.$message.success('已查阅')
      this.getInfo()
      this.$emit('after')
    },
    onEdit () {
      this.newParams = {
        visible: true,
        obj: this.form
      }
    },
    afterEdit () {
      this.getInfo()
      this.$emit('after')
    },
    onDel () {
      this.$confirm('是否确认删除该跟进记录?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await api.follow.delete({ id: this.obj.id })
          this.$message.success('删除成功')
          this.$emit('after')
          this.close()
        })
        .catch(() => {})
    },
    async handleSizeChange (size) {
      // 切换每页显示的数量
      this.tableParams.page = 1 // 重置为第一页
      this.tableParams.pageSize = size
      await this.loadList()
    },
    handleIndexChange (current) {
      // 切换页码
      this.tableParams.page = current
      this.loadList()
    },
    closeAfter () {
      this.close()
      this.$emit('load-list')
    }
  }
}
</script>
<style lang="scss">
.el-tooltip__popper {
  max-width: 500px !important;
}
.customerFollow .customerFollowTableContent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.customerFollow .headImg {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  border-radius: 5px;
}
</style>
